<template>
  <div class="learningProgress-list-container">
    <div class="breadcrumb-wrapper">
      <el-breadcrumb separator="Ξ">
        <el-breadcrumb-item to="/"><a>首页</a></el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in breadcrumbItem" :key="index">
          <a>{{ item.name }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div v-if="centerType" class="back-button-wrapper">
      <el-button size="mini" class="back-button" @click="backClick" icon="el-icon-back" type="warning">
        返回
      </el-button>
    </div>


    <el-card v-for="comment in comments" :key="comment.id" class="comment-item">
  <!-- 新增：课程封面和标题展示区域 -->
  <div class="course-info">
    <el-image
      v-if="comment.coverImageUrl"
      class="course-cover"
      :src="comment.coverImageUrl"
      fit="cover"
    />
    <div class="course-title">
      {{ comment.courseTitle || '未知课程' }}
    </div>
  </div>

  <!-- 以下为原有评论内容 -->
  <div class="comment-header">
    <el-avatar :size="40" :src="comment.userAvatar"></el-avatar>
    <span class="name">{{ comment.name || '匿名用户' }}</span>
    <el-rate
      v-model="comment.rating"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value} 星"
    ></el-rate>
    <span class="comment-time">{{ formatTime(comment.commentTime) }}</span>
  </div>

  <div class="comment-content">
    <p>{{ comment.content }}</p>
    <div v-if="comment.image" class="comment-image-wrapper">
      <el-image
        style="width: 100px; height: 100px"
        :src="comment.image"
        :preview-src-list="[comment.image]"
      ></el-image>
    </div>
  </div>

  <div v-if="comment.userId === userId" class="comment-actions">
    <el-button type="primary" @click="deleteComment(comment.id)">删除</el-button>
  </div>
</el-card>


    <el-pagination class="list-pagination" background :pager-count="7" :page-size="pageSize" :page-sizes="pageSizes"
      :total="total" layout="total, prev, pager, next, sizes, jumper" @current-change="curChange"
      @size-change="sizeChange" />
  </div>

</template>


<script>
export default {
  data() {
    return {
      breadcrumbItem: [{ name: '课程评价' }],
      comments: [],
      total: 0,
      pageSize: 8,
      pageSizes: [8, 16, 24, 40],
      centerType: false,
    };
  },
  created() {
    if (this.$route.query.centerType) this.centerType = true;
    this.getList(1); 
  },
  methods: {
    getList(page = 1) {
      const token = localStorage.getItem('frontToken');
      const params = {
        page,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      };
      const endpoint ="comment/getMyComments";
      this.$http
        .get(endpoint, {
          params,
          headers: { Authorization: `Bearer ${token}` },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.comments = res.data.data.list;
            this.total = Number(res.data.data.total);
          } else {
            this.$message.error(res.data.msg || '获取数据失败');
          }
        })
        .catch(() => {
          this.$message.error('服务请求失败');
        });
    },

    formatTime(time) {
      if (!time) return ''; // 如果时间为空，返回空字符串

      // 检查 time 是否已经是 Date 对象，否则尝试转换为 Date 对象
      const date = typeof time === 'object' && time instanceof Date ? time : new Date(time);

      // 检查转换后的日期是否有效
      if (isNaN(date.getTime())) {
        console.warn("Invalid date for formatTime:", time);
        return '无效时间';
      }

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    curChange(page) {
      this.getList(page);
    },
    sizeChange(size) {
      this.pageSize = size;
      this.getList(1);
    },

    backClick() {
      this.$router.push({ path: '/index/center' });
    },
  },
};
</script>

<style scoped lang="scss">
.learningProgress-list-container {
  background: #f5f7fa;
  padding: 30px 7%;

  .breadcrumb-wrapper {
    padding-bottom: 10px;
    background: transparent;
  }

  .back-button-wrapper {
    margin-bottom: 20px;
    text-align: left;
  }

  .back-button {
    background-color: #fceccf;
    border: none;
    color: #333;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .comment-item {
    margin-bottom: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;

  .course-info {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .course-cover {
      width: 80px;
      height: 60px;
      border-radius: 6px;
      margin-right: 16px;
      object-fit: cover;
    }

    .course-title {
      font-weight: 600;
      font-size: 16px;
      color: #1f2f3d;
    }
  }
  
    .comment-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;

      .name {
        font-weight: 600;
        font-size: 16px;
        color: #333;
        margin-right: auto;
      }

      .el-rate {
        margin-left: 10px;
      }

      .comment-time {
        font-size: 12px;
        color: #999;
      }
    }

    .comment-content {
      font-size: 14px;
      color: #555;
      line-height: 1.6;

      .comment-image-wrapper {
        margin-top: 10px;
      }
    }

    .comment-actions {
      margin-top: 12px;
      text-align: right;

      .el-button {
        font-size: 13px;
        padding: 6px 12px;
      }
    }
  }

  .list-pagination {
    margin-top: 40px;
    text-align: center;
  }
}

</style>
